<template>
  <el-card>
    <el-row class="flex-center">
      <Logo></Logo>
    </el-row>
    <el-row class="flex-center">
      <h2>{{ msg }}</h2>
    </el-row>
    <el-form ref="registerForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="" prop="email" label-width="0">
        <el-input v-model="formData.email" placeholder="邮箱" clearable prefix-icon="el-icon-user"
                  class="form-item-input"></el-input>
      </el-form-item>
      <el-form-item label="" prop="pwd" label-width="0">
        <el-input v-model="formData.pwd" placeholder="密码" clearable prefix-icon="el-icon-lock"
                  show-password class="form-item-input"></el-input>
      </el-form-item>
      <el-form-item label="" prop="repwd" label-width="0">
        <el-input v-model="formData.repwd" placeholder="确认密码" clearable prefix-icon="el-icon-lock"
                  show-password class="form-item-input"></el-input>
      </el-form-item>
      <el-form-item label="" prop="inputCode" label-width="0">
        <el-row class="form-item-input">
          <el-col :span="12">
            <el-input v-model="formData.inputCode" placeholder="验证码" clearable></el-input>
          </el-col>
          <el-col :span="12">
            <Sidentify :identify-code="identify.identifyCode"></Sidentify>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-button type="primary" class="form-item-input" @click="handleRegister">注册</el-button>
    <div class="flex-center bottom-help">
      <el-link type="primary" @click="toLogin">{{ pageText.toLogin }}</el-link>
      <el-divider v-if="false" direction="vertical"></el-divider>
      <el-link v-if="false" type="primary" @click="toResetPwd">{{ pageText.resetPwd }}</el-link>
    </div>
  </el-card>
</template>

<script>
import Logo from '@/components/Logo'
import Sidentify from '@/components/Sidentify'
import {getCode} from '@/api/login'
export default {
  name: 'RegisterForm',
  props: {
    msg: {
      type: String,
      default: '请登录'
    }
  },
  components: {
    Logo,
    Sidentify
  },
  data () {
    return {
      formData: {
        email: undefined,
        pwd: undefined,
        repwd: undefined,
        inputCode: undefined,
        uuid: ''
      },
      rules: {
        email: [
          this.$validate.necessary('请输入邮箱'),
          this.$validate.email()
        ],
        pwd: [
          this.$validate.necessary('请输入密码'),
          this.$validate.length(6, 16, '密码')
        ],
        repwd: [
          this.$validate.necessary('请再次输入密码'),
          this.$validate.length(6, 16, '确认密码')
        ],
        inputCode: [
          this.$validate.necessary('验证码不能为空')
        ]
      },
      identify: {
        identifyCode: '',
        identifyCodeId: ''
      },
      loading: true,
      pageText: {
        toLogin: '已有账号？去登陆',
        resetPwd: '忘记密码？'
      }
    }
  },
  methods: {
    handleRegister () {
      this.$refs['registerForm'].validate(valid => {
        if (!valid) {
          this.$notify.error('表单验证失败')
          return
        }
        if (!(this.formData.inputCode.toLowerCase() === this.identify.identifyCode.toLowerCase())) {
          this.$notify.error('验证码输入错误')
          return
        }
        if (!(this.formData.pwd === this.formData.repwd)) {
          this.$notify.error('两次输入的密码不一致')
          return
        }
        this.$store.dispatch('Register', this.formData)
          .then(() => {
            this.$notify.success('注册成功，即将跳转到工作台')
            this.$store.dispatch('SetCurrentMenu', '工作台')
            setTimeout(() => {
              this.$router.push('/dashboard')
            }, 500)
          }).catch(error => {
            this.$notify.error({
              title: '注册失败',
              message: error.message
            })
          })
      })
    },
    refreshCode () {
      // 刷新验证码
      this.identify.identifyCode = ''
      this.makeCode(4)
    },
    makeCode (len) {
      this.loading = true
      getCode(len).then(res => {
        // test end
        setTimeout(() => {
          // 获取验证码和验证码ID
          this.identify.identifyCode = res.data.code
          this.formData.uuid = res.data.codeId
          this.identify.identifyCodeId = res.data.codeId
          this.loading = false
        }, 300)
      })
    },
    toLogin () {
      this.$router.push('/login')
    },
    toResetPwd () {
      this.$router.push('/password')
    }
  },
  created () {
    this.refreshCode()
  },
  mounted () {
    this.identify.identifyCode = ''
  }
}
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  justify-content: center;
}
.form-item-input {
  width: 100%;
}
.login-code {
  /* 改变鼠标移动到验证码容器上时的样式 */
  cursor: pointer;
}
.bottom-help {
  margin-top: 20px;
}
//.el-divider{
//  background-color: #b6b7ba;
//}
</style>
